import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path, { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import topLevelAwait from 'vite-plugin-top-level-await'
// import zhCn  from 'element-plus/dist/locale/zh-cn.mjs'
import { visualizer } from 'rollup-plugin-visualizer'
// 自动导入Icon图标
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
//引入svg插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
//Gzip配置优化
import viteCompression from 'vite-plugin-compression'
//配置jsx
import vueJsx from '@vitejs/plugin-vue-jsx';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    //获取各环境变量
    let env = loadEnv(mode, process.cwd())
    const lifecycle = process.env.npm_lifecycle_event
    return {
        plugins: [
            vue(),
            vueJsx(),
            viteCompression({
                algorithm: 'gzip',
                verbose: true, // 是否在控制台输出压缩结果信息
                threshold: 10240,
                ext: '.gz', // 压缩文件的后缀
                deleteOriginFile: true, // 是否删除原文件
            }),
            AutoImport({
                // AutoImport 增加 eslintrc ，自动生成 .eslintrc-auto-import.json 文件
                eslintrc: {
                    enabled: true,
                },
                imports: [
                    'vue',
                    '@vueuse/core',
                    {
                        '@/store/index.ts': [['*', 'store']],
                        '@/utils/loading.ts': ['showLoading', 'hideLoading'],
                        '@/utils/dict.ts': ['autoDict'],
                        '@/utils/userInfo.ts': ['autoUserInfo'],
                    }
                ], // 导入内置的所有api
                include: [/\.[tj]sx?$/, /\.vue$/], // 匹配的文件，也就是哪些后缀的文件需要自动引入
                // 生成auto-import.d.ts声明文件
                dts: './src/auto-import.d.ts',
                resolvers: [
                    IconsResolver({
                        // 修改Icon组件前缀，不设置则默认为i,禁用则设置为false
                        prefix: 'i',
                    }),
                    ElementPlusResolver({
                        importStyle: 'sass'
                    })
                ],
            }),
            Components({
                resolvers: [
                    // 自动注册图标组件
                    IconsResolver({
                        // 指定collection，即指定为elementplus图标集ep
                        enabledCollections: ['ep']
                    }),
                    ElementPlusResolver({
                        // 关键：自动引入修改主题色添加这一行，使用预处理样式
                        importStyle: 'sass'
                    })
                ],
            }),
            Icons({
                scale: 1, // 缩放比 相对1em
                autoInstall: true, // 自动安装
                compiler: 'vue3' // 编译方式
            }),
            // svg定义
            createSvgIconsPlugin({
                iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
                symbolId: 'icon-[dir]-[name]',
            }),
            topLevelAwait({
                // The export name of top-level await promise for each chunk module
                promiseExportName: '__tla',
                // The function to generate import names of top-level await promise in each chunk module
                promiseImportName: i => `__tla_${i}`
            }),
            lifecycle === 'report' ? visualizer({ open: true, brotliSize: true, filename: 'report.html' }) : null
        ],

        // -----user添加配置--------
        base: './', //不加打包后白屏
        resolve: {
            //别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
            alias: [
                {
                    find: '@',
                    replacement: resolve(__dirname, 'src')
                }
            ]
        },
        // -----user添加配置--------
        // css全局变量的配置
        css: {
            preprocessorOptions: {
                scss: {
                    api: 'modern-compiler', // 使用新的 API 调用方式,
                    javascriptEnabled: true,
                    additionalData: `@use "@/styles/element/index.scss" as *; @use "@/styles/variable.scss" as *;`,                    
                }
            }
        },
        // 代理服务器
        server: {
            proxy: {
                [env.VITE_APP_BASE_API]: {
                    //获取服务器地址的设置
                    target: env.VITE_SERVE,
                    //是否需要代理跨域
                    changeOrigin: true,
                    //路径重写
                    rewrite: (path) => path.replace(/^\/api/, ''),
                },
                // "/bpi": {
                //     //获取服务器地址的设置
                //     target: 'http://192.168.9.137:9233/',
                //     //是否需要代理跨域
                //     changeOrigin: true,
                //     //路径重写
                //     rewrite: (path) => path.replace(/^\/bpi/, ''),
                // }
            },
            host: '0.0.0.0',
        },
        // server: {
        //   host: '0.0.0.0',
        //   // port: 8080,
        //   open: true
        // },
        build: {
            brotliSize: false, // 进行压缩计算
            chunkSizeWarningLimit: 2000, // chunk 大小警告的限制（以 kbs 为单位）
            rollupOptions: {
                output: {// 分包
                    manualChunks(id) {
                        if (id.includes("node_modules")) { return id.toString().split("node_modules/")[1].split("/")[0].toString() }
                    },
                },
            },
        },
    }
})
